<template>
	<div>
		<div class="article-content" data-article="{{article}}">
			<h2 class="article-title">{{article.title}}</h2>
			<!--信息-->
			<div class="article-meta">
				<span>分类 : 教程</span>
				<span>发布时间 : {{article.releaseTime | getdate}}</span>
				<span>评论 : (50)</span>
			</div>
			<!--文章内容-->
			<div class="article-content-box">{{{article.content}}}</div>
		</div>
		<!--评论-->
		<comment-app :id="id" :comments="comments"></comment-app>
	</div>
</template>
<script>
	var comment = require("../../components/user/comment.vue");
	export default{
		data(){
			return {
				article:"",
				id:"",
				comments:""
			}
		},
		route:{
			data(transition){
				var th = this;
				th.id = transition.to.query.id;
				th.$http.get("/articleDetails" , {id:th.id} , function(res){
					th.comments = res.article.comment;
					transition.next({article:res.article});
				},"JSON");
			}
		},
		components:{
			commentApp:comment
		}
	};
</script>
<style scoped>
	.article-content{
		width:1000px;
		margin:0 auto;
		background:#fff;
		padding:20px 25px;
		box-sizing:border-box;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	}
	.article-content .article-title{
		font-size:22px;
		color:#3d464d;
		text-align:center;
	}
	.article-meta{
		width: 100%;
		padding: 15px 0;
		font-size: 14px;
		border-bottom: 1px solid #e7e7e7;
		color: #999;
		margin-bottom: 15px;
		text-align: center;
	}
	.article-meta span{
		display:inline-block;
		margin:0 10px;
	}
	.article-content-box{
		width:100%;
		height:auto;
		color:#333;
		line-height:1.75;
		font-size:14px;
		color:#555;
	}
</style>
